<template>
  <div class="yun-image" v-loading="loading" element-loading-text="用户信息获取中..." ref="yunImageDiv">
    <ImageOperate v-if="imageOperateIfValue"></ImageOperate>
    <CreateCategory v-if="createCategoryIfValue"></CreateCategory>
    <OperateShare v-if="operateShareIfValue"/>
    <router-view v-slot="{ Component }">
      <transition>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { Ref, VNodeRef, computed, onMounted, ref } from "vue";
import { getImages } from "../../request/img";
import { useImageStore } from "../../store/image";
import ImageOperate from "../../components/YunImage/ImageOperate.vue";
import CreateCategory from "../../components/YunImage/CreateCategory.vue";
import OperateShare from "../../components/YunImage/OperateShare.vue";
import { getCategories } from "../../request/category";
import { useRoute } from "vue-router";
import { toDebounce, toThrottle } from '../../util/excuteFunc'
const loading = ref(true)
const imageStore = useImageStore()
const route = useRoute()
const createCategoryIfValue = computed(() => {
  return imageStore.categoryCreating && route.name === 'Category'
})
const imageOperateIfValue = computed(() => {
  return imageStore.operating && ['MyImage', 'Category'].includes(route.name as string)
})
const operateShareIfValue = computed(() => {
  return imageStore.shareOperating && route.name === 'Category'
})
const yunImageDiv = ref({}) as Ref<HTMLElement>
getImages().then(
  val => {
    loading.value = false
    imageStore.setImages(val.data)
  },
  err => {
    loading.value = false
  }
)
getCategories().then(
  val => {
    imageStore.categories = val.data
    if(imageStore.categories.length){
      imageStore.categorySelectValue = imageStore.categories[0].id.toString()
    }
  }
)

function resizeImage(){
  let divWidth = yunImageDiv.value.offsetWidth
  let count = Math.round(divWidth / 280)
  let newWidth = Math.round(divWidth / count - 10)
  document.documentElement.style.setProperty('--image-width', newWidth.toString() + 'px');
}
let debounceResizeImage = toDebounce(resizeImage, 100)
imageStore.debounceResizeImage = debounceResizeImage
onMounted(() => {
  debounceResizeImage()
  window.addEventListener('resize', () => {
    debounceResizeImage()
  })
})
</script>

<style scoped>

</style>